<template>
	<view>
		<view class="dropDownBox">
			<uv-input clearable style="background:#F9F9F9;border-radius:0;" placeholder="请输入关键词搜索" v-model="value"
				@change="inputChange" @confirm="searchBtn()" @clear="clearInput()" border="none" prefixIcon="search"
				prefixIconStyle="font-size: 22px;color: #909399"></uv-input>
			<view style="padding:0 35rpx;border-left:1px solid #E5EAED;border-radius: 0 10rpx 10rpx 0;"
				@click="searchBtn">搜索</view>
		</view>

		<!-- 分类 -->
		<scroll-view class="sortBox" scroll-y="true">
			<view class="sortList" :class="index == sortIndex ?'selectBox':''" v-for="(item,index) in sortList"
				@click="sortBtn(item,index)">{{item.name}}</view>
		</scroll-view>

		<!-- 轮播 -->
		<view class="bannerBox">
			<uni-swiper-dot :info="imgList" :current="current" field="content" :mode="mode">
				<swiper class="swiper-box" @change="change" circular :interval="3000" autoplay>
					<swiper-item v-for="(item ,index) in imgList" :key="index">
						<view class="swiper-item">
							<image :src="item.imgurl" mode="aspectFill"></image>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>

		<!-- 提示文字 -->
		<view class="tipsBox" v-if="shopList.length <= 0">{{tipsText}}</view>

		<!-- 店铺列表 -->
		<scroll-view class="shopListBox" scroll-y="true" @scrolltolower="lower" v-else>
			<view class="shopList" v-for="(item,index) in shopList"
				:style="index == (shopList.length - 1) ? 'border-bottom:0;':''" @tap="goto"
				:data-url="item.bid==0?'/pages/index/index':'/pagesExt/business/index?id='+item.bid">
				<image :src="item.logo" mode="aspectFill"></image>
				<view class="shopContent">
					<view class="shopName">{{item.name}}</view>
					<view class="scoreBox">
						<text class="scoreTips">推荐指数</text>
						<uv-rate count="5" v-model="item.commentscore" :readonly="true"></uv-rate>
					</view>
					<view>联系电话：{{item.tel}}</view>
					<view class="shopAddress">
						<view>地址：{{item.address}}</view>
						<text style="color:red;">{{item.juli}}</text>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 订单按钮 -->
		<view class="orderLayer" @tap="goto" data-url="/pagesZ/sameCity/order">
			<image src="https://test.jhwl.site/static/img/order.png"></image>
			<view>订单信息</view>
		</view>
		<loading v-if="loading"></loading>
		<dp-tabbar :opt="opt" @getmenuindex="getmenuindex"></dp-tabbar>
	</view>
</template>
<script>
	var app = getApp();
	export default {
		data() {
			return {
				opt: {},
				loading: false,
				value: '', //搜索value
				shopList: [], //门店数据
				latitude: '', //纬度
				longitude: '', //精度
				area: '',
				mendianid: 0,
				curent_address: '', //当前位置: 城市或者收货地址
				page: 1, //当前页
				total_page: 0, //总页数
				tipsText: '', //暂无数据提示
				sortList: [], //分类list
				sortIndex: 0, //分类下标(默认选中的)
				hot_cate_id: 0, //分类ID,默认0 查询所有
				imgList: [],
				current: 0,
				mode: 'default',
			}
		},

		mounted() {

		},

		onLoad: function(opt) {
			this.opt = app.getopts(opt);
			this.getSortFun(); //获取分类
		},

		methods: {
			//轮播图改变事件
			change(e) {
				this.current = e.detail.current;
			},

			//点击门店事件
			clickBtn(item) {
				console.log(item);
			},

			//输入事件
			inputChange(e) {
				this.value = e;
			},

			//搜索事件
			searchBtn() {
				this.page = 1;
				this.shopList = [];
				this.getShopListFun();
			},

			//清空搜索事件
			clearInput() {
				this.value = '';
				this.page = 1;
				this.shopList = [];
				this.getShopListFun();
			},

			// 滚动到底部
			lower() {
				if (this.page < this.total_page) {
					this.page++;
					this.getShopListFun();
				}
			},

			//分类点击事件
			sortBtn(item, index) {
				this.loading = true;
				this.hot_cate_id = item.id;
				this.sortIndex = index;
				this.value = ''; //清空搜索框内容
				this.page = 1; //当前页恢复初始值
				this.shopList = []; //清空商铺列表
				this.getShopListFun();
			},

			//获取分类list
			getSortFun() {
				let _this = this;
				app.get('ApiBusinessProduct/category', {}, function(res) {
					res.data.unshift({
						name: '全部',
						id: 0
					});
					_this.sortList = res.data;
					_this.getdata();
				});
			},

			getdata() {
				let that = this;
				this.loading = true;
				let timer = setTimeout(() => { //3秒之后定时器未被销毁 则GPS信号弱 无法获取定位
					that.getShopListFun();
				}, 3000);

				uni.getLocation({
					type: 'gcj02',
					success: function(res) {
						clearTimeout(timer); //清除定时器
						that.latitude = res.latitude;
						that.longitude = res.longitude;
						that.getShopListFun();
					}
				});
			},

			//获取商铺列表
			getShopListFun() {
				let opt = this.opt;
				let id = 0;
				if (opt && opt.id) {id = opt.id};
				let that = this;
				app.post('ApiIndex/index', {
					hot_cate_id: that.hot_cate_id,
					id: id,
					latitude: that.latitude,
					longitude: that.longitude,
					page: that.page,
					area: that.area,
					search_text: that.value,
					mendian_id: that.mendianid
				}, function(data) {
					that.loading = false;
					let list = data.pagecontent;
					let listArr = [];
					let listInfo = []; 
					list.forEach((item,index)=>{
						if(item.temp == 'business'){
							let list = item.data;
							list.forEach(i => {
								that.shopList.push(i);
							})
						};
						//当图片list长度大于0 将不会再添加新的图片,此操作防止点击分类刷新轮播图
						if(that.imgList.length <= 0){ 
							if(item.temp == 'banner'){
								let list = item.data;
								list.forEach(i=>{
									that.imgList.push(i);
								})
							};
						}
					})
					that.tipsText = '暂 无 数 据'
					that.total_page = data.pagecontent[2].total_page;
				});
			},
		}
	}
</script>

<style lang="less">
	.bannerBox {
		width: calc(100% - 150rpx);
		float: left;
		padding-left:3%;
	}

	.sortBox {
		width: 140rpx;
		float: left;
		height: calc(100vh - 290rpx);
		overflow: hidden; //超出文本隐藏
		text-overflow: ellipsis; //溢出使用省略号显示
		white-space: nowrap; // 默认不换行；
	}

	.selectBox {
		background-color: #ff3333;
		border-radius: 0 20rpx 20rpx 0;
		font-weight: bold;
		color: #fff;
	}

	.sortList {
		width: 100%;
		float: left;
		line-height: 80rpx;
		text-align: center;
	}

	.dropDownBox {
		border: 1px solid #E5EAED;
		border-radius: 10rpx;
		width: 94%;
		float: left;
		margin: 10rpx 3% 20rpx 3%;
		line-height: 70rpx;
		height: 70rpx;
		display: flex;
		color: #00324D;
		z-index: 999;
	}

	.orderLayer {
		width: 110rpx;
		text-align: center;
		position: fixed;
		right: 20rpx;
		bottom: 200rpx;
		font-size: 12px;
		transform: scale(0.8);
	}

	.orderLayer image {
		width: 70rpx;
		height: 70rpx;
	}

	.swiper-box {
		height: 300rpx;
	}

	.swiper-item {
		width: 100%;
		height: 100%;
		float: left;
	}

	.swiper-item image {
		border-radius: 10px;
		width: 100%;
		height: 100%;
	}

	.shopListBox {
		width: calc(96% - 150rpx);
		float: right;
		height: calc(100vh - 590rpx);
		margin: 20rpx 2% 0 2%;
	}

	.tipsBox {
		width: calc(96% - 150rpx);
		float: left;
		line-height: calc(100vh - 590rpx);
		align-items: center;
		text-align: center;
		justify-content: space-evenly;
		color: #ccc;
		font-weight: bold;
		font-size: 30rpx;
		letter-spacing: 1px;
	}

	.shopList {
		width: 100%;
		float: left;
		border-bottom: 1px solid #ececec;
		padding-bottom: 20rpx;
		margin-bottom: 10rpx;
		display: flex;
		align-items: center;
	}

	.shopAddress {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.shopAddress view {
		width: 80%;
		float: left;
		overflow: hidden; //超出文本隐藏
		text-overflow: ellipsis; //溢出使用省略号显示
		white-space: nowrap; // 默认不换行；
	}

	.shopList image {
		width: 170rpx;
		height: 140rpx;
	}

	.shopContent {
		width: calc(100% - 190rpx);
		float: left;
		margin-left: 20rpx;
		font-size: 24rpx;
		color: #939393;
		line-height: 50rpx;
	}

	.shopName {
		font-weight: bold;
		color: #000;
		font-size: 28rpx;
		overflow: hidden; //超出文本隐藏
		text-overflow: ellipsis; //溢出使用省略号显示
		white-space: nowrap; // 默认不换行；
	}

	.scoreBox {
		display: flex;
		align-items: center;
	}

	.scoreTips {
		padding: 0 15rpx;
		background-color: red;
		color: #fff;
		margin-right: 10rpx;
	}

	.scoreBox image {
		width: 140rpx;
		height: 50rpx;
	}

	::v-deep .dp-tabbar-bot {
		position: fixed;
		left: 0;
		bottom: 0;
	}
</style>